/*styles for home content only*/
@import "./../../../assets/scss/index.scss";
:host{display: block;height: 100%;}

[hidden]{display:none !important;}

.home-container{
    height: 100%;
    color: $color-white;
    background: $bd-dark;
    padding: pxTorem(5px);
    .title{
        height: 3rem;
        padding: 0 pxTorem(18px);
    }
}

.heightAuto{
    height: auto !important;
}

.text-center{
    text-align: center;
}

.inline-block{
    display: inline-block;
}

.wait-container{
    width: 23%;
    height: 100%;
    background: $bd-container;
    .title{
        background: $bd-title-left;
    }
    .wait-list{
        height: calc(100% - 5.5rem);
    }
    .page-container{
        width: 100%;
        height: 2.5rem;
        background: $color-white;
        color: $color-dark;
    }
    .page-container span:first-child{
        border-right: 1px solid #828282;
    }
    .page-container i{
        font-size: pxTorem(30px);
    }
    .count{
        display: inline-block;
        width: pxTorem(30px);
        height: pxTorem(30px);
        background: #e36442;
        color: $color-white;
        border-radius: 50%;
        font-size: pxTorem(16px);
    }
}

.delivery-container{
    width: 50%;
    background: $color-white;
    height: 100%;
    .title{
        background: $bd-title-middle;
    }
    .delivery-list{
        padding-left: pxTorem(12px);
        padding-right: pxTorem(12px);
        overflow: hidden;    
        height: calc(100% - 3rem);    
    }
    .delivery-list li{
        width: 33%;
        margin-top: pxTorem(12px);
        margin-bottom: pxTorem(12px);        
    }
}

.ope-container{
    width: 25%;
    height: 100%;
    padding: pxTorem(8px);
    background: $color-white;
    .delivery-detail{
        background: $bd-right-top;
        position: relative;
        .icon-clear-single{
            position: absolute;
            right: 10px;
        }
        .order-item{
            height: pxTorem(60px);background:#545662;
            display: flex; flex-direction: row;justify-content: space-between;
            padding-left: pxTorem(20px);
            span{display: flex;flex-direction: column;justify-content: center;}
            border-bottom: 2px solid white;
            .serial,.qty{
                padding-right: pxTorem(5px);
            }
            .serial{
                width: 60%;
                text-align: left;
            }
            .qty{
                width: 20%;
                text-align: right;
            }
            .icon-clear{
                width: 20%;
                text-align: center;
            }
        }
        span{text-align: center;}
    }
    .delivery-name{
        background: $bd-right-top;
        color: $color-white;
    }
    .btn-certain{
        background: $primary;
        color: $color-white;
    }
    .btn-certain-success{
        background: $mpj-success;
        color: $color-white;
    }
    button{height: 60%;}
    .page-container{
        position: absolute;
        width: 100%;
        background: #fff;
        height: 40px;
        bottom: 0;
        color: #333;
        border: 1px solid #ccc;
        span:first-child{
            border-right: 1px solid #ccc;
        }
    }
}

.bd-orange{
    background: $bd-orange;
}
.bd-yellow{
    background: $bd-yellow;
}
.bd-blue{
    background: $bd-blue;
}

.deliver-list{
    width: 100%;
    background: $color-white;
    color: $color-dark;
    border-bottom: 1px solid $border-dark;
    height: 100%;
    padding: 0 pxTorem(14px);
}

.active{
    background: $bd-list-active !important;
    color: $color-white;
}

.wleft{
    width: pxTorem(100px);
    padding-right: pxTorem(5px);
}
.wmiddle{
    width: pxTorem(70px);
    padding-left: pxTorem(5px);
    padding-right: pxTorem(5px);
}
.wright{
    width: pxTorem(163px);
    padding-left: pxTorem(5px);
    padding-right: pxTorem(5px);
}

.pct20{
    width: 20%;
}
.pct30{
    width: 30%;
}
.pct50{
    width: 50%;
}

deliver-list{
    height: 12%;
}

.timeout{
    color: $color-white;
    background: $color-red;
}

.deliver{
    border-radius: 50%;
    width: pxTorem(120px);
    height: pxTorem(120px);
}